<template>
  <div class="practice-filed">
    <div class="left">
      <ul>
        <li @click="clickId = '1'" :class="clickId == '1' ? 'greenB' : ''">
          let 和 const
          <button @click="run('1')">run</button>
        </li>
        <li @click="clickId = '2'" :class="clickId == '2' ? 'greenB' : ''">
          变量的解构赋值
          <button @click="run('2')">run</button>
        </li>
        <li @click="clickId = '3'" :class="clickId == '3' ? 'greenB' : ''">字符串的扩展</li>
        <li @click="clickId = '4'" :class="clickId == '4' ? 'greenB' : ''">字符串的新增方法</li>
        <li @click="clickId = '5'" :class="clickId == '5' ? 'greenB' : ''">正则的扩展</li>
        <li @click="clickId = '6'" :class="clickId == '6' ? 'greenB' : ''">数值的扩展</li>
        <li @click="clickId = '7'" :class="clickId == '7' ? 'greenB' : ''">函数的扩展</li>
        <li @click="clickId = '8'" :class="clickId == '8' ? 'greenB' : ''">数组的扩展</li>
        <li @click="clickId = '9'" :class="clickId == '9' ? 'greenB' : ''">对象的扩展</li>
        <li @click="clickId = '10'" :class="clickId == '10' ? 'greenB' : ''">对象的新增方法</li>
        <li @click="clickId = '11'" :class="clickId == '11' ? 'greenB' : ''">Symbol</li>

        <li @click="clickId = 'addProxy'" :class="clickId == 'addProxy' ? 'greenB' : ''">Proxy</li>
        <li @click="clickId = 'addReflect'" :class="clickId == 'addReflect' ? 'greenB' : ''">Reflect</li>

        <li @click="clickId = '12'" :class="clickId == '12' ? 'greenB' : ''">Set 和 Map 数据结构</li>
        <li @click="clickId = '13'" :class="clickId == '13' ? 'greenB' : ''">Promise 对象</li>
        <li @click="clickId = '14'" :class="clickId == '14' ? 'greenB' : ''">Iterator 和 for...of 循环</li>
        <li @click="clickId = '15'" :class="clickId == '15' ? 'greenB' : ''">Generator 函数的语法</li>
        <li @click="clickId = '16'" :class="clickId == '16' ? 'greenB' : ''">Generator 函数的异步应用</li>
        <li @click="clickId = '17'" :class="clickId == '17' ? 'greenB' : ''">async 函数</li>
        <li @click="clickId = '18'" :class="clickId == '18' ? 'greenB' : ''">Class 的基本语法</li>
        <li @click="clickId = '19'" :class="clickId == '19' ? 'greenB' : ''">Class 的继承</li>
        <li @click="clickId = '20'" :class="clickId == '20' ? 'greenB' : ''">Module 的语法</li>
        <li @click="clickId = '21'" :class="clickId == '21' ? 'greenB' : ''">Module 的加载实现</li>
        <li @click="clickId = '22'" :class="clickId == '22' ? 'greenB' : ''">编程风格</li>
        <li @click="clickId = '23'" :class="clickId == '23' ? 'greenB' : ''">异步遍历器</li>
        <li @click="clickId = '24'" :class="clickId == '24' ? 'greenB' : ''">其他未读</li>
      </ul>
    </div>
    <div class="right">
      <LetConst v-if="clickId == '1'"></LetConst>
      <deconstruction v-if="clickId == '2'"></deconstruction>
      <StringExt v-if="clickId == '3'"></StringExt>
      <StringMethods v-if="clickId == '4'"></StringMethods>
      <RegExpExt v-if="clickId == '5'"></RegExpExt>
      <NumberExt v-if="clickId == '6'"></NumberExt>
      <FunctionExt v-if="clickId == '7'"></FunctionExt>
      <ArrayExt v-if="clickId == '8'"></ArrayExt>
      <ObjectExt v-if="clickId == '9'"></ObjectExt>
      <ObjectMethods v-if="clickId == '10'"></ObjectMethods>
      <AddSymbol v-if="clickId == '11'"></AddSymbol>
      <SetMap v-if="clickId == '12'"></SetMap>
      <PromiseObj v-if="clickId == '13'"></PromiseObj>
      <IteratorForof v-if="clickId == '14'"></IteratorForof>
      <GeneratorFunction v-if="clickId == '15'"></GeneratorFunction>
      <GeneratorApplication v-if="clickId == '16'"></GeneratorApplication>
      <AsyncFunction v-if="clickId == '17'"></AsyncFunction>
      <ClassBasic v-if="clickId == '18'"></ClassBasic>
      <ClassInherit v-if="clickId == '19'"></ClassInherit>
      <ModuleSyntax v-if="clickId == '20'"></ModuleSyntax>
      <ModuleApplication v-if="clickId == '21'"></ModuleApplication>
      <ProgrammingStyle v-if="clickId == '22'"></ProgrammingStyle>
      <AsyncIterator v-if="clickId == '23'"></AsyncIterator>
      <Others v-if="clickId == '24'"></Others>

      <AddProxy v-if="clickId == 'addProxy'"></AddProxy>
      <AddReflect v-if="clickId == 'addReflect'"></AddReflect>
    </div>
  </div>
</template>

<script>
import {
  LetConst,
  letConstFunc,
  deconstruction,
  deconstructionFunc,
  StringExt,
  StringMethods,
  RegExpExt,
  NumberExt,
  FunctionExt,
  ArrayExt,
  ObjectExt,
  ObjectMethods,
  AddSymbol,
  SetMap,
  PromiseObj,
  Others,
  IteratorForof,
  GeneratorFunction,
  GeneratorApplication,
  AsyncFunction,
  ClassBasic,
  ClassInherit,
  ModuleSyntax,
  ModuleApplication,
  ProgrammingStyle,
  AsyncIterator,

  AddProxy,
  AddReflect
} from "@/syntax/index";
export default {
  data() {
    return {
      clickId: "1"
    };
  },
  methods: {
    run(id) {
      switch (id) {
        case "1":
          console.clear();
          letConstFunc();
          break;
        case "2":
          console.clear();
          deconstructionFunc();
        default:
          break;
      }
    }
  },
  components: {
    LetConst,
    deconstruction,
    StringExt,
    StringMethods,
    RegExpExt,
    NumberExt,
    FunctionExt,
    ArrayExt,
    ObjectExt,
    ObjectMethods,
    AddSymbol,
    SetMap,
    Others,
    PromiseObj,
    IteratorForof,
    GeneratorFunction,
    GeneratorApplication,
    AsyncFunction,
    ClassBasic,
    ClassInherit,
    ModuleSyntax,
    ModuleApplication,
    ProgrammingStyle,
    AsyncIterator,

    AddProxy,
    AddReflect
  }
};
</script>

<style scoped>
.greenB {
  color: #42b983;
  font-weight: bold;
}
.practice-filed {
  text-align: left;
  display: flex;
  height: calc(100vh - 16px);
}
.left {
  flex: 2;
  background: rgb(248, 248, 248);
  margin-right: 20px;
  box-shadow: 10px 0 10px #ccc;
  border-radius: 10px;
  line-height: 30px;
  color: #c06478;
  overflow: scroll;
}
.left li:hover {
  text-decoration: underline;
}
.left li,
.left li button {
  cursor: pointer;
}
.right {
  flex: 8;
  border-radius: 10px;
  /* box-shadow: 0 0 20px #ccc; */
  padding: 10px;
  background: url("../assets/bg.jpeg");
  box-sizing: border-box;
  overflow: scroll;
}
button {
  margin-left: 10px;
}
</style>